<template>
  <div class="page-wrapper">
    <div class="top">
      <div class="search-area">
        <router-link class="search-btn" to="/index/search" hover-class="navigator-hover">
          <img class="icon-search" src="../assets/icon-search.png" mode="aspectFit"/>搜索你想要的商品
        </router-link>
      </div>
    </div>
    <div class="main-content">
      <div class="item" v-for="(item,index) in categoryList" :key="index">
        <router-link class="category-item" :to="'/goods/goodsList?categoryId='+item.categoryId">
          <div class="item-img">
            <img class="img" mode="aspectFill" :src="item.categoryPic"/>
          </div>
          <div class="category-title">{{item.categoryName}}</div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
import { API } from '../config'

export default {
    name:'category',
    data() {
        return {
            categoryList: [],
        }
    },
    methods: {
        // 获取分类
        getCategoryList() {
            let vm = this
            vm.$axios.get(API + '/product/selCategory').then((response) => {
                if(response.data.code=='200') {
                    vm.categoryList = response.data.data
                }
            })
        }
    },
    mounted() {
        let vm = this;
        vm.getCategoryList();
    }
}
</script>


<style scoped lang='less'>
@import '../css/category/index.less';
</style>
